<template>
	<view class="rf-product-list" :style="{'background':backgroundColor}">
		<view class="rf-product-list-container">
			<block v-for="(item, index) in list" :key="index">
				<!--商品列表-->
				<view v-if="(index + 1) % 2 !== 0 || isList" class="rf-product-item list_box"
					@tap.stop="toggleSpec(item)"
					:class="[isList ? 'rf-product-flex-list' : '']" hover-class="hover" :hover-start-time="150">
					<view class="rf-product-image-wrapper">
						<view class="rf-product-img-box" :class="isList?'pt0':null">
							<!-- <image :src="item.picture" mode="widthFix" :preview="false" -->

							<image :src="item.picture" mode="aspectFit" :preview="false"
								:class="[isList?'rf-product-list-img':'rf-product-img']" ></image>
						</view>
						<!-- <text class="sketch in1line">{{ item.desc }}</text> -->
						<view class="triangle-wrapper">
							<!-- <image class="triangle-tag" :src="item | filterTagName"></image> -->
						</view>
					</view>
					<view class="rf-pro-content">
						<text class="sketch in1line">{{ item.desc }}</text>
						<view class="rf-pro-tit">{{ item.title }}</view>
						<!-- <view v-if="item">
							<view class="rf-pro-price">
								<text class="rf-sale-price text-red">￥{{ item.price }}</text> -->
								<!-- <text class="rf-factory-price"
									v-if="item.market_price > item.price">{{ moneySymbol }}{{ item.market_price }}</text> -->

							<!-- </view> -->

<!-- 
							<view class="rf-pro-price" v-if="item.give_point &&Number(item.give_point)>0">
								<text class="rf-sale-price text-red "
									style="font-size: 28upx;">赠送趣豆:{{ item.give_point }}</text>
							</view> -->
							<!-- <view class="rf-pro-pay">
								<text></text>
								<text  @tap.stop="addCart(item)" class="iconfont icon-jia"
									></text>
							</view> -->
						<!-- </view> -->
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
		<view class="rf-product-list-container" v-if="!isList">
			<block v-for="(item, index) in list" :key="index">
				<!--商品列表-->
				<view v-if="(index + 1) % 2 === 0" class="rf-product-item"
					@tap.stop="toggleSpec(item)"
					:class="[isList ? 'rf-product-flex-list' : '']" hover-class="hover" :hover-start-time="150">
					<view class="rf-product-image-wrapper">
						<view class="rf-product-img-box">
							<image :src="item.picture" mode="widthFix" :preview="false"
								:class="[isList?'rf-product-list-img':'rf-product-img']"  ></image>
						</view>
						<text class="sketch in1line">{{ item.desc }}</text>
						<view class="triangle-wrapper">
							<!-- <image class="triangle-tag" :src="item | filterTagName"></image> -->
						</view>
					</view>
					<!-- <view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.title }}</view>
						<view v-if="item">
							<view class="rf-pro-price">
								<text class="rf-sale-price text-red">￥{{ item.price }}</text> -->
								<!-- <text class="rf-factory-price"
									v-if="item.market_price > item.price">{{ moneySymbol }}{{ item.market_price }}</text> -->
							<!-- </view> -->
						<!-- 	<view class="rf-pro-price" v-if="item.give_point &&Number(item.give_point)>0">
								<text class="rf-sale-price text-red "
									style="font-size: 28upx;">赠送趣豆:{{ item.give_point }}</text>
							</view> -->
							<!-- <view class="rf-pro-pay">
								<text></text>


								<text  @tap.stop="addCart(item)" class="iconfont icon-jia"></text>
							</view> -->
						<!-- </view> -->
					<!-- </view> -->
				</view>
				<!--商品列表-->
			</block>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec show" style="z-index: 9999;height: auto;" v-if="specClass === 'show'" @touchmove.stop.prevent="stopPrevent" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideSpec"></view>
			<!-- <view class="layer" style="bottom: 0rpx;z-index: 9999;position: absolute;" @tap.stop="stopPrevent">
				<rf-attr-content :product="productDetail" @toggle="toggleSpec" :showBuyBtn="true"></rf-attr-content>
			</view> -->
			
			<scroll-view class="layer" style="bottom: 0rpx;z-index: 9999;position: absolute;" @tap.stop="stopPrevent" scroll-y="true">
				<rf-attr-content :product="productDetail" @toggle="toggleSpec" :showBuyBtn="true"></rf-attr-content>
			</scroll-view>
			
		</view>
	</view>
</template>
<script>
	/**
	 * @des 商品列表
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-05-15 10:49
	 */
	// import {
	// 	productDetail,
	// 	cartItemCount,
	// 	cartItemCreate
	// } from '@/api/product';
	import rfAttrContent from '@/components/rf-attr-content';
	import request from '@/common/request.js';
	// import $mAssetsPath from '@/config/assets.config';
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'rfProductList',
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否以列表展示 | 列表或大图
			isList: {
				type: Boolean,
				default: true
			},
			// 是否以列表展示 | 列表或大图
			bottom: {
				type: Number,
				default: 0
			},
			backgroundColor: {
				type: String
			}
		},
		components: {
			rfAttrContent
		},
		data() {
			return {

				specClass: 'none',
				moneySymbol: this.moneySymbol,
				productDetail: {},
				addCardGoodSgid: ''
			};
		},
		computed: {
		},
		filters: {
			filterTotalSales(val) {
				if (val > 10000) {
					val = `${(val / 10000).toFixed(2)}w`;
				}
				return val;
			},
		},
		methods: {
			...mapMutations(['vuex_setCartNum']),
			// 跳转详情
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},


			toggleSpec(row) {
				console.log(row);
				uni.navigateTo({
					url:"/pages/me/duitu?id="+row.id
				})
				return;
			},
			stopPrevent() {},
			hideSpec() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			},
			
		}
	};
</script>

<style lang='scss'>
	.rf-product-img-box {
		&.pt0 {
			padding-top: 0;
		}
	}
</style>
